<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线选座-郫县电影</title>
<link rel="short icon"  href="/photo/head.png"/>
<link href="${pageContext.request.contextPath}/css/maoyan.css" type="text/css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/seat.css" type="text/css" rel="stylesheet">
<link href="../../../../font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/js/layer-v3.0.3/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/js/layer-v3.0.3/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/phone.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layer-v3.0.3/layer/mobile/layer.js"></script>
<style >
	.buttons{
		width:68%;
		margin-left:3%;
		overflow:hidden;
		height:50px;
		background-color:#ef4238;
		border:none;
		border-radius:21px;
		text-align:center;
		line-height:50px;
		color: #fff;
	    font-size: 26px;
	    letter-spacing: 2px;
		margin-top: 0px;
	}
</style>
</head>
<body>
	<div class="header">
		<div class="header-inner">
			<a href="/" class="logo" data-act="icon-click"></a>
			<div class="city-container" data-val="{currentcityid:59 }">
				<div class="city-selected">
					<div class="city-name">
						成都 <span class="caret"></span>
					</div>
				</div>
				<div class="city-list" data-val="{ localcityid: 59 }">
					<div class="city-list-header">
						定位城市： <a class="js-geo-city">成都</a>
					</div>

				</div>
			</div>


			<div class="nav">
				<ul class="navbar">
					<li><a href="/home" data-act="home-click" class="active">首页</a>
					</li>
					<li><a href="/filmBeShowing" data-act="movies-click">电影</a></li>
					<li><a href="/cinemas" data-act="cinemas-click">影院</a></li>
				</ul>
			</div>

			<div class="user-info">
				<div class="user-avatar J-login">
					<img
						src="https://p0.meituan.net/movie/7dd82a16316ab32c8359debdb04396ef2897.png">
					<span class="caret"></span>
					<c:choose>
						<c:when test="${sessionScope.cur_user == null }">
							<ul class="user-menu">
								<li><a  href="/login">登录</a></li>
							</ul>							
						</c:when>
						<c:otherwise>
							<ul class="user-menu">
								<li><a  href="/logoff">注销</a></li>
								<li><a  href="/user_update">个人信息</a></li>
							</ul>		
						</c:otherwise>
					</c:choose>
				</div>
			</div>

			<form action="/findfilms_byname" target="_blank" class="search-form"
				data-actform="search-click">
				<input name="name" class="search" type="search" maxlength="32"
					placeholder="找影视剧、影人、影院" autocomplete="off"> <input
					class="submit" type="submit" value="">
			</form>
		</div>
	</div>
	<div class="header-placeholder"></div>
	
	<!-- 第二部分 -->
	<div class="container" id="app">
		<div class="order-progress-bar">
			<div class="step first done">
				<span class="step-num">1</span>
				<div class="bar"></div>
				<span class="step-text">选择影片场次</span>
			</div>
			<div class="step done">
				<span class="step-num">2</span>
				<div class="bar"></div>
				<span class="step-text">选择座位</span>
			</div>
			<div class="step ">
				<span class="step-num">3</span>
				<div class="bar"></div>
				<span class="step-text">付款</span>
			</div>
			<div class="step last ">
				<span class="step-num">4</span>
				<div class="bar"></div>
				<span class="step-text">影院取票观影</span>
			</div>
		</div>

		<!-- 选择座位 -->
		<div class="main clearfix">
			<div class="hall">
				<div class="seat_show">
					<ul>
			        	<li>
			            	<i></i>
			                <span >可选</span>
			            </li>
			            <li>
			            	<i></i>
			                <span>已售</span>
			            </li>
			            <li>
			            	<i></i>
			                <span>已选</span>
			            </li>
			        </ul>
				</div>


				<div class="seats-block" data-cols="16" data-section-id="1"
					data-section-name="全区" data-seq-no="201907030134200">

					<div class="row-id-container">
						<span class="row-id">1</span> 
						<span class="row-id">2</span> 
						<span class="row-id">3</span> 
						<span class="row-id">4</span> 
						<span class="row-id">5</span>  
						<span class="row-id">6</span> 
						<span class="row-id">7</span> 
						<span class="row-id">8</span> 
						<span class="row-id">9</span> 
						<span class="row-id">10</span> 
					</div>
					<!-- 座位区域 -->	
					<div class="seat_choose">
						<form id="form" action="/buy" method="post">
						<input type="hidden" name="scheduleId" value="${requestScope.schedule.scheduleId }" />
						<div class="number" id="num"></div>
						<div class="seats" id="seats">
							<ul class="touchs" id="touchs"><div class="screen1">大厅屏幕</div>
							<c:forEach items="${requestScope.seats}" var="seat" varStatus="status">
								<c:if test="${seat.seatState eq 1}" var="flag">
								<li class="selectable" data-seat="${seat.rows}排${seat.seats}列" data-id="id-${seat.rows}-${seat.seats}">
								<input type="checkbox" name="seats" id="seat-${status.count }" value="${ seat.seatId}">
								<label for="seat-${status.count }"></label>
								</li>
								</c:if>
								<c:if test="${not flag}">
								<li class="sold" data-seat="${seat.rows}排${seat.seats}列" data-id="id-${seat.rows}-${seat.seats}">
								<input type="checkbox" name="seats" id="seat-${status.count }" value="${ seat.seatId}">
								<label for="seat-${status.count }"></label>
								</li>
								</c:if>
							</c:forEach>
							</ul>
						</div>
						</form>
					</div>									
				</div>
			</div>
		<!-- 电影信息 -->
			<div class="side">
			<div class="movie-info clearfix">
				<div class="poster">
					<img
						src="${request.getContextPath()}${requestScope.film.cover }">
				</div>
				<div class="content">
					<p class="name text-ellipsis">${requestScope.film.filmName }</p>
					<div class="info-item">
						<span>类型 :</span> <span class="value">${requestScope.film.type }</span>
					</div>
					<div class="info-item">
						<span>时长 :</span> <span class="value">${requestScope.film.filmLength }</span>
					</div>
				</div>
			</div>
			<!-- 电影信息 -->
			<div class="show-info">
				<div class="info-item">
					<span>影院 :</span> <span class="value text-ellipsis">${requestScope.cinema.cinemaName }</span>
				</div>
				<div class="info-item">
					<span>影厅 :</span> <span class="value text-ellipsis">${requestScope.schedule.hall.hallName }</span>
				</div>
				<div class="info-item">
					<span>版本 :</span> <span class="value text-ellipsis">${requestScope.schedule.filmVersion }</span>
				</div>
				<div class="info-item">
					<span>场次 :</span> <span class="value text-ellipsis screen">${requestScope.schedule.filmTime}-${requestScope.schedule.beginHour }:${requestScope.schedule.beginMin }-${requestScope.schedule.endHour }:${requestScope.schedule.endMin }</span>
				</div>
				<div class="info-item">
					<span>票价 :</span> <span class="value text-ellipsis">${requestScope.schedule.price }</span>
				</div>
			</div>
			<div class="ticket-info">
				<div id="chooseSeat" style="font-size: 15px">
				</div>
						
				<div class="total-price">
					<span>总价 :</span> <span id="AllPrice" class="price">0</span>
				</div>
			</div>		
			<div class="confirm-order">
				</div>
				    <!-- String MovieName, String CinemaName, String HallName, String Version,String Time,String Price,String TotalPrice -->
				   		<input id="confirm" class="buttons" 
				   		 type="button"  value="确认选座"/>                                                          
				</div>
				</div>

			</div>
			</div>
		</div>
	</div>
<script>
$(function(){
	
	$('.sold').children('input').attr({'disabled':'disabled','checked':'checked'});
	var totalPrice=0;
	var seatId1=0;
	$('.seats li.selectable input').on('click',function(){
		var checklen = $('.seats li').not('.selected').not('.sold').children('input:checked').length;
		console.log(checklen);
		var li = $( this ).parent().toggleClass(".selected");
		
		var totalPrice=${requestScope.schedule.price}*checklen;	
		$("#AllPrice").html(totalPrice);
		var chooseSeat = $("#chooseSeat");
		var seat =  chooseSeat.children("span[" + li.data("id") + "]" );
		if( seat && seat.length > 0 ){
			seat.remove();
		} else {
			$("<span/>").attr(li.data("id"),'').html( li.data("seat") ).appendTo( chooseSeat);
		}
	});
	
	$("#confirm").click(function(){
		$("#form").submit();
	});
	//公用弹出层
	function popu(content){
		layer.open({
			content: content
			,skin: 'msg'
			,time: 2
		});	
	}
})
</script>

<!---拖拽js--->
<script>
$(function(){
    var flag = false;
    var cur = {
        x:0,
        y:0
    }
    var nx,ny,dx,dy,x,y ;
    function down(){
        flag = true;
        var touch ;
        if(event.touches){
            touch = event.touches[0];
        }else {
            touch = event;
        }
        cur.x = touch.clientX;
        cur.y = touch.clientY;
        dx = div2.offsetLeft;
        dy = div2.offsetTop;
    }
    function move(){
        if(flag){
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            nx = touch.clientX - cur.x;
            ny = touch.clientY - cur.y;
            x = dx+nx;
            y = dy+ny;
            div2.style.left = x+"px";
            //div2.style.top = y +"px";

			
            //阻止页面的滑动默认事件
            document.addEventListener("touchmove",function(){
                //event.preventDefault();
            },false);
        }
    }
    //鼠标释放时候的函数
    function end(){
        flag = false;
    }
    var div2 = document.getElementById("touchs");
    div2.addEventListener("mousedown",function(){
        down();
    },false);
    div2.addEventListener("touchstart",function(){
        down();
    },false)
    div2.addEventListener("mousemove",function(){
        move();
    },false);
    div2.addEventListener("touchmove",function(){
        move();
    },false)
    document.body.addEventListener("mouseup",function(){
        end();
    },false);
    div2.addEventListener("touchend",function(){
        end();
    },false);
	
});
</script>
</body>
</html>